<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="icon" href="/img/favicon.png" type="image/png">
  <!-- 引入 Vue 3 -->
  <script src="https://unpkg.com/vue@3.2.37/dist/vue.global.prod.js"></script>

  <!-- 引入 Element Plus -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus@2.2.15/dist/index.css">
  <script src="https://unpkg.com/element-plus@2.2.15"></script>

  <!-- 引入 STOMP 和 SockJS -->
  <script src="/js/sockjs.min.js"></script>
  <script src="/js/stomp.min.js"></script>
</head>

<body>
<div id="app">
  <div class="chat-window">
    <!-- 消息列表 -->
    <div class="messages">
      <div v-for="msg in messages" :key="msg.id" class="message">
        <span>{{ msg.sender }}: </span>
        <span v-html="parseMessage(msg.message)"></span>
      </div>
    </div>

    <!-- 输入框 -->
    <div class="input-area">
      <input v-model="privateMessageInput" placeholder="输入消息..." />
      <button @click="sendPrivateMessage">发送</button>
      <button @click="toggleEmojiPanel">😀</button>
    </div>

    <!-- 表情包选择 -->
    <div v-if="showEmojiPanel" class="emoji-panel">
      <span v-for="emoji in emojis" :key="emoji" @click="selectEmoji(emoji)">
        {{ emoji }}
      </span>
    </div>
  </div>
</div>

<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        stompClient: null,  // STOMP 客户端实例
        privateMessageInput: "",
        privateRecipient: "佚名", // 目标用户
        messages: [],       // 存储接收到的消息
        showEmojiPanel: false,
        emojis: ["😀", "😂", "😍", "😭", "😡", "😎", "👍", "🎉"], // 简单的 emoji 列表
      };
    },
    methods: {
      connect() {
        this.socket = new SockJS("/ws");
        this.stompClient = Stomp.over(this.socket);
        this.stompClient.connect({}, () => {
          this.stompClient.subscribe("/user/queue/private", (messageOutput) => {
            let receivedMessage = JSON.parse(messageOutput.body);
            this.messages.push(receivedMessage);
          });
        });
      },

      sendPrivateMessage() {
        if (this.privateMessageInput.trim() && this.privateRecipient.trim()) {
          let messageData = {
            sender: "章初初", // 假设当前用户
            recipient: this.privateRecipient,
            message: this.privateMessageInput,
          };
          this.stompClient.send("/app/privateMessage", {}, JSON.stringify(messageData));
          this.messages.push(messageData); // 本地显示
          this.privateMessageInput = "";
        }
      },

      toggleEmojiPanel() {
        this.showEmojiPanel = !this.showEmojiPanel;
      },

      selectEmoji(emoji) {
        this.privateMessageInput += emoji;
        this.showEmojiPanel = false;
      },

      parseMessage(message) {
        return message.replace(/([\uD800-\uDBFF][\uDC00-\uDFFF])/g, (match) => {
          return `<span class="emoji">${match}</span>`;
        });
      },
    },
    mounted() {
      this.connect();
    }

  }).mount('#app');
</script>
</body>
</html>
